<template>
  <div>
    <el-input v-model="customerName" style="width: 240px" placeholder="客户姓名" />
    <el-button plain  @click="listCustomerPage">查询</el-button>

    <el-button round type="primary" @click="toAdd">+登记</el-button>
    <el-divider />

    <div class="flex flex-col items-start gap-4">
      <el-segmented v-model="value" :options="options" size="default" @change="handleChange" />
    </div>
    <el-table :data="customerList" stripe style="width: 100%" @row-click="addItemToLevel">
          <el-table-column type="index" label="序号" width="80"/>
          <el-table-column prop="customerName" label="客户姓名"  />
          <el-table-column prop="bloodType" label="血型"  />
          <el-table-column prop="customerAge" label="年龄"  />
          <el-table-column prop="customerSex" label="性别"  >
            <template #default="scope">
              <el-tag v-if="scope.row.customerSex == 0" type="success">男</el-tag>
              <el-tag v-if="scope.row.customerSex == 1" type="danger">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="familyMember" label="家属"  />
          <el-table-column prop="idCard" label="身份证号"  width="180px"/>
          <el-table-column prop="buildingNo" label="所属楼房" />
          <el-table-column prop="roomNo" label="房间号" />
          <el-table-column prop="bedNo" label="床号" />
          <el-table-column prop="birthday" label="出生日期" width="150px"/>
            
          <el-table-column  label="操作"  width="150px">
            <template #default="scope">
              <el-link type="primary" @click="toEdit(scope.row)"><el-icon><Edit /></el-icon>修改</el-link> &nbsp;&nbsp;
              <el-link type="danger" @click="delCustomer(scope.row)"><el-icon><Delete /></el-icon>删除</el-link>
            </template>
          </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      @current-change="handleCurrentChange"
      size="small"
      background
      layout="prev, pager, next"
      :total=total
      class="mt-4"
    />

    <!-- 新增或修改对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" style="width:800px">
      <el-divider />

      <el-row>
        <el-col :span="11">
          <el-form :model="customer">
            <el-form-item label="客户姓名:">
              <el-input v-model="customer.customerName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄:">
              <el-input v-model="customer.customerAge" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别:">
              <el-select v-model="customer.customerSex" placeholder="请选择性别">
                <el-option label="男" value="1" />
                <el-option label="女" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker v-model="customer.birthday" type="date" placeholder="出生日期" :size="size"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="身份证号:">
              <el-input v-model="customer.idCard" autocomplete="off" />
            </el-form-item>

            <el-form-item label="身高:">
              <el-input v-model="customer.height" autocomplete="off" />
            </el-form-item>

            <el-form-item label="血型:">
              <el-input v-model="customer.bloodType" autocomplete="off" />
            </el-form-item>

            <el-form-item label="家属:">
              <el-input v-model="customer.familyMember" autocomplete="off" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">

        </el-col>
        <el-col :span="11">
          <el-form :model="customer">
            <el-form-item label="楼栋:">
              <el-input v-model="customer.buildingNo" autocomplete="off" />
            </el-form-item>

            <el-form-item label="房间号:"  v-show="title == '信息编辑'">
              <el-input v-model="customer.roomNo" autocomplete="off" readonly/>
            </el-form-item>

            <el-form-item label="房间号:" v-show="title == '入住登记'">
              <el-select v-model="customer.roomNo" placeholder="Select" style="width: 240px" @change="getBedList">
                <el-option-group v-for="group in roomOptions" :key="group.label" :label="group.label">
                  <el-option v-for="item in group.options" :key="item.id" :label="item.roomNo" :value="item.roomNo" />
                </el-option-group>
              </el-select>
            </el-form-item>

            <el-form-item label="床位号:"  v-show="title == '信息编辑'">
              <el-input v-model="customer.bedId" autocomplete="off" readonly/>
            </el-form-item>
            <el-form-item label="床位号:" v-show="title == '入住登记'">
              <el-select v-model="customer.bedId" placeholder="Select" style="width: 240px">
                <el-option v-for="item in bedList" :key="item.id" :label="item.bedNo" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="入住时间">
              <el-date-picker v-model="customer.checkinDate" type="datetime" placeholder="入住时间"
                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="合同到期时间">
              <el-date-picker v-model="customer.expirationDate" type="datetime" placeholder="合同到期时间"
                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <el-form-item label="体重:">
              <el-input v-model="customer.weight" autocomplete="off" />
            </el-form-item>

            <el-form-item label="联系电话:">
              <el-input v-model="customer.contactTel" autocomplete="off" />
            </el-form-item>
            <el-form-item label="身心状况:">
              <el-input v-model="customer.psychosomaticState" autocomplete="off" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>


      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addOrEditCustomer">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
  import BedManagerApi from '@/api/BedManager.js'
  import CustomerApi from '@/api/Customer.js'
  export default {
    data() {
      return {
        customerName: '',
        value: '自理老人',
        options: ['自理老人','护理老人'],
        page: 1,
        pageSize: 5,
        total:0,
        manType:1,
        customerList:[],
        dialogFormVisible:false,
        customer:{buildingNo:'606'},
        roomOptions:[],
        bedList:[],
        title:'入住登记'
      }
    },
    methods:{
      delCustomer(row){
        if(confirm('确定删除该客户吗？')){
          CustomerApi.delCustomer({
            id:row.id,
            bedId:row.bedId
          }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.listCustomerPage();
          })
        }
      },
      toEdit(row){
        this.title = '信息编辑'
        this.dialogFormVisible = true
        this.customer = JSON.parse(JSON.stringify(row));
      },
      addOrEditCustomer(){
        if(this.title=='入住登记'){
          CustomerApi.rzdj(this.customer).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.dialogFormVisible = false
            this.listCustomerPage();
          })
        }else{
          CustomerApi.editKHXX(this.customer).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.dialogFormVisible = false
            this.listCustomerPage();
          })
        }
      },
      getBedList(val){
        BedManagerApi.getBedList(val).then(res => {
        this.bedList = res.data;
        })
      },
      toAdd(){
        this.title = '入住登记'
        this.dialogFormVisible = true
        this.customer = {buildingNo:'606'}

        // 获取所有房间信息
        BedManagerApi.getRoomList().then(res => {
          let floor1 = res.data.filter(item => {
            return item.roomFloor == '一楼';
          })

          let floor2 = res.data.filter(item => {
            return item.roomFloor == '二楼';
          })
          this.roomOptions = [
            {
              label: '一楼',
              options: floor1
            },
            {
              label: '二楼',
              options: floor2
            }
          ]
          console.log(this.roomOptions);
        })
      },
      
      handleChange(val){
        if(val == '自理老人'){
          this.manType = 1
        }else{
          this.manType = 2
        }
        // 查询
        this.listCustomerPage()
      },
      handleCurrentChange(val){
        this.page = val
        // 查询
        this.listCustomerPage()
      },
      listCustomerPage(){
        CustomerApi.listKhxxPage({
          customerName:this.customerName,
          page:this.page,
          pageSize:this.pageSize,
          manType:this.manType
        }).then(res=>{
          this.customerList = res.data.records
          this.total = res.data.total
        })
     }
    
    },
    created(){
      // 查询
      this.listCustomerPage()
    }
  }
</script>

<style scoped>

</style>